<template>

  <div class="main-image">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
        <a href="javascript:void(0);" >相册</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
      <div class="image-content">
        <el-image fit="cover"  class="image-item" v-for="img in imagesFiles" alt="121"  :src="prefix+img.filePath" lazy :preview-src-list="imageUrls">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
  </div>
</template>

<script>
import { diskIndex } from "@/api/disk/index";
import { allImages } from "@/api/disk/file";
import {mapGetters,mapState} from 'vuex';
export default {
  name: "image",
  data() {
    return {
      prefix:"http://localhost:9999/disk/file/download/",
      searchData:{
        folderId: "1",
        folderName: "文件夹",
        bucketName: "images"
      },
      imagesFiles:[],
      imageUrls:[],
      urls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jp2eg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  },
  created() {
    this.getData();
  },
  computed: {
    ...mapGetters(["repository"]),
  },
  methods:{
    getData(){
      allImages("文件名称查找")
        .then(data => {
          var _this = this;
          this.imagesFiles = data.data.data;
          this.imageUrls = []
          this.imagesFiles.forEach(one=>{
            _this.imageUrls.push(_this.prefix + one.filePath)
          })
        })
        .catch(() => {
          loading();
        });
    }
  }

}
</script>

<style scoped>
.main-image{
  background-color: white;
  padding: 20px;
}
.image-item{
  width: 200px;
  height: 200px;
  margin-left: 20px;
}
.image-content{
  padding: 20px;
}
</style>
